<#include "../../common/header.htm">
<body class="gray-bg top-navigation">
<div id="wrapper">
	<div id="page-wrapper" class="gray-bg">
		<div class="wrapper wrapper-content">
			<div class="row">
				<div class="col-lg-12">
	                <div class="ibox float-e-margins">
	                    <div class="ibox-content">
	                        <div class="row">
	                            <div class="col-lg-12">
	                                <div class="form-group">
										<div class="form-inline">
											<div class="form-group ml10">
												<input type="text" class="form-control" name="keyword" placeholder="案件编号/案件名称" />
											</div>
											<div class="form-group ml10 ">
												<input type="button" class="btn btn-primary querybtn" onclick="queryList();" value="查询" />
											</div>
										</div>
									</div>
	                            </div>
	                        </div>
	                        <div class="table-responsive">
	                            <table id="dg"></table>
	                        </div>
	                    </div>
	                </div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<div class="tabs-container">
						<ul class="nav nav-tabs">
	                        <li class="active">
	                        	<a href="#tab-1" aria-expanded="true" id="showZD">案件对象</a>
	                        </li>
                   		</ul>
                   		<div class="tab-content">
	                        <div id="tab-1" class="tab-pane active">
	                            <div class="panel-body">
	                            	<div class="row">
			                            <div class="col-lg-12">
			                                <div class="form-group filecon">
												<div class="form-inline">
													<div class="form-group ml10">
														<input type="text" class="form-control filecaseinp" name="personName" placeholder="对象名称/证件号码" />
													</div>
													<div class="form-group ml10 ">
														<input type="button" class="btn btn-primary querybtn" onclick="$('#showZD').trigger('click');" value="查询" />
														<input type="button" class="btn btn-primary addbtn" onclick="showEditDialog();" value="+新增" />
													</div>
												</div>
											</div>
			                            </div>
			                        </div>
	                                <div class="table-responsive c">
	                            		<table id="caseObject"></table>
	                        		</div>
	                            </div>
	                        </div>
	                    </div>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</body>
<script>
	function queryList(){
	    firstTable();
	};
	window.onload= firstTable;
	function firstTable(){
		var keyword = $.trim($('input[name="keyword"]').val());
   		$('#dg').datagrid({
            url: "${ctx}/casemanage/findCaseManageListByPage",
			method: 'post',
			queryParams:{//每次请求的参数
				keyword: keyword
	    	},
			height:230,
	        fitColumns: true,
	        pagination: true,//允许分页
	        rownumbers: true,//行号
	        singleSelect: true,//只选择一行
	        pageSize: 5,//每一页数据数量
	        checkOnSelect: false,
	        autoRowHeight : false,//定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            pageList: [5,10, 20, 50, 100, 200],//在设置分页属性的时候初始化页面大小选择列表。
            //表格的列
			columns: [[
				{
	                field: 'case_uuid',//域值
	                title: '案件编号',//标题
	                align : 'center',
                    width:'30%',
                    formatter:function (value,row) {
                        if (value){
                            return '<a onclick="showCaseManageDetail(\''+row.id+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
	            },
	            {
	                field: 'case_name',//域值
	                title: '案件名称',//内容
	                align : 'center',
                    width:'40%'
	            },
	            {
	                field: 'case_time',//域值
	                title: '案发时间',//内容
	                sortable: true,//启用排序
	                align : 'center',
                    width:'15%',
	                formatter: function(value, row, index){
	                    if(value){
	                        var date = new Date(value);
	                        return formatDate(date, 'yyyy-MM-dd');
	                    }else{
	                        return '-';
	                    }
	                }
	            },
	            {
	                field: 'create_time',//域值
	                title: '创建时间',//内容
	                sortable: true,//启用排序
	                align : 'center',
                    width:'15%',
	                formatter: function(value, row, index){
	                    if(value){
	                        var date = new Date(value);
                            return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
	                    }else{
	                        return '-';
	                    }
	                }
	            }
			]],
			onHeaderContextMenu: function(e, field){
	            e.preventDefault();
	            if (!cmenu){
	                createColumnMenu();
	            }
	            cmenu.menu('show', {
	                left:e.pageX,
	                top:e.pageY
	            });
	    	},
	    	onClickRow : function (index, row) {
	    		var caseId = row["case_uuid"];
	    		$(".nav-tabs>li").each(function(index){
		            if($(this).hasClass("active")){
		            	$(this).children("a").trigger("click");
		            }
		    	})
	    	},
	    	onLoadSuccess : function (data){
	    		//默认选中第一行
	    		$('#dg').datagrid("selectRow",0);
	    		var caseUuid = $('#dg').datagrid('getRows')[0].case_uuid;
	    		$('#caseObject').datagrid({
		            url: "${ctx}/casemanage/findPersonInformationByPage",
					method: 'post',
					queryParams:{//每次请求的参数
						casemanagerId : caseUuid
		        	},
                    fitColumns: true,
                    height:590,
			        pagination: true,//允许分页
			        rownumbers: true,//行号
			        singleSelect: true,//只选择一行
			        pageSize: 20,//每一页数据数量
			        checkOnSelect: false,
			        autoRowHeight : false,//定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。
		            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
		            pageList: [20, 50, 100,200],//在设置分页属性的时候初始化页面大小选择列表。
		            //表格的列
					columns: [[
						{
		                    field: 'personName',//域值
		                    title: '对象名称',//标题
		                    align : 'center',
		                    width : '15%'
		                },
		                {
		                    field: 'idType',//域值
		                    title: '证件类型',//内容
		                    align : 'center',
		                    width : '10%'
		                },
		                {
		                    field: 'idNumber',//域值
		                    title: '证件号码',//内容
		                    align : 'center',
		                    width : '15%'
		                },
		                {
		                    field: 'phoneNumber',//域值
		                    title: '联系电话',//内容
		                    align : 'center',
		                    width : '8%'
		                },
		                {
		                    field: 'birthPlace',//域值
		                    title: '地址',//内容
		                    align : 'center',
		                    width : '15%'
		                },
		                {
		                    field: 'bodyType',//域值
		                    title: '人员类型',//内容
		                    align : 'center',
		                    width : '10%'
		                },
		                {
		                    field: 'remark',//域值
		                    title: '备注',//内容
		                    align : 'center',
		                    width : '17%'
		                },
		                {
			                field: 'sssss',//域值
			                title: '操作',//内容
			                align : 'center',
		                    width:'10%',
			                formatter: function(value, row, index){
								return '<a class="casebi" href="javaScript:void(0)" style="cursor: pointer" onclick="showEditDialog('+row.pid+','+index+')">修改</a>&nbsp;<sapn class="caseshu">|</sapn>&nbsp;' +
									   '<a class="casebi" href="javaScript:void(0)" style="cursor: pointer" onclick="delCaseObj('+row.pid+')">删除</a>';
			                }
			            }
					]],
					onHeaderContextMenu: function(e, field){
			            e.preventDefault();
			            if (!cmenu2){
			                createColumnMenu2();
			            }
			            cmenu2.menu('show', {
			                left:e.pageX,
			                top:e.pageY
			            });
		        	}
		        });
	    	}
        });
	};
	/*列显示下拉框*/
	var cmenu;
	function createColumnMenu(){
	    cmenu = $('<div/>').appendTo('body');
	    cmenu.menu({
	        onClick: function(item){
	            if (item.iconCls == 'icon-ok'){
	                $('#dg').datagrid('hideColumn', item.name);
	                cmenu.menu('setIcon', {
	                    target: item.target,
	                    iconCls: 'icon-empty'
	                });
	            } else {
	                $('#dg').datagrid('showColumn', item.name);
	                cmenu.menu('setIcon', {
	                    target: item.target,
	                    iconCls: 'icon-ok'
	                });
	            }
	        }
	    });
	    var fields = $('#dg').datagrid('getColumnFields');
	    for(var i=0; i<fields.length; i++){
	        var field = fields[i];
	        var col = $('#dg').datagrid('getColumnOption', field);
	        cmenu.menu('appendItem', {
	            text: col.title,
	            name: field,
	            iconCls: 'icon-ok'
	        });
	    }
	};
	/*列显示下拉框*/
	var cmenu2;
	function createColumnMenu2(){
	    cmenu2 = $('<div/>').appendTo('body');
	    cmenu2.menu({
	        onClick: function(item){
	            if (item.iconCls == 'icon-ok'){
	                $('#caseObject').datagrid('hideColumn', item.name);
	                cmenu2.menu('setIcon', {
	                    target: item.target,
	                    iconCls: 'icon-empty'
	                });
	            } else {
	                $('#caseObject').datagrid('showColumn', item.name);
	                cmenu2.menu('setIcon', {
	                    target: item.target,
	                    iconCls: 'icon-ok'
	                });
	            }
	        }
	    });
	    var fields = $('#caseObject').datagrid('getColumnFields');
	    for(var i=0; i<fields.length; i++){
	        var field = fields[i];
	        var col = $('#caseObject').datagrid('getColumnOption', field);
	        cmenu2.menu('appendItem', {
	            text: col.title,
	            name: field,
	            iconCls: 'icon-ok'
	        });
	    }
	};
	/*bootstrap table*/
	$(document).ready(function(){
		/*显示账单导入日志详情*/
		$(document).on("click","#showZD",function(e){
			e.preventDefault();//阻止a链接的跳转行为
	        $(this).tab('show');//显示当前选中的链接及关联的content
			var caseUuid = $('#dg').datagrid('getSelected')["case_uuid"];
			var personName = $.trim($('input[name="personName"]').val());
			$('#caseObject').datagrid({
	            url: "${ctx}/casemanage/findPersonInformationByPage",
				method: 'post',
				queryParams:{//每次请求的参数
					casemanagerId : caseUuid,
					keyword : personName
	        	},
                fitColumns: true,
                height:590,
		        pagination: true,//允许分页
		        rownumbers: true,//行号
		        singleSelect: true,//只选择一行
		        pageSize: 20,//每一页数据数量
		        checkOnSelect: false,
		        autoRowHeight : false,//定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。
	            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
	            pageList: [20, 50, 100,200],//在设置分页属性的时候初始化页面大小选择列表。
	            //表格的列
				columns: [[
					{
	                    field: 'personName',//域值
	                    title: '对象名称',//标题
	                    align : 'center',
	                    width : '15%'
	                },
	                {
	                    field: 'idType',//域值
	                    title: '证件类型',//内容
	                    align : 'center',
	                    width : '10%'
	                },
	                {
	                    field: 'idNumber',//域值
	                    title: '证件号码',//内容
	                    align : 'center',
	                    width : '15%'
	                },
	                {
	                    field: 'phoneNumber',//域值
	                    title: '联系电话',//内容
	                    align : 'center',
	                    width : '8%'
	                },
	                {
	                    field: 'birthPlace',//域值
	                    title: '地址',//内容
	                    align : 'center',
	                    width : '15%'
	                },
	                {
	                    field: 'bodyType',//域值
	                    title: '人员类型',//内容
	                    align : 'center',
	                    width : '10%'
	                },
	                {
	                    field: 'remark',//域值
	                    title: '备注',//内容
	                    align : 'center',
	                    width : '17%'
	                },
	                {
		                field: 'sssss',//域值
		                title: '操作',//内容
		                align : 'center',
	                    width:'10%',
		                formatter: function(value, row, index){
							return '<a class="casebi" href="javaScript:void(0)" style="cursor: pointer" onclick="showEditDialog('+row.pid+','+index+')">修改</a>&nbsp;<sapn class="caseshu">|</sapn>&nbsp;' +
								   '<a class="casebi" href="javaScript:void(0)" style="cursor: pointer" onclick="delCaseObj('+row.pid+')">删除</a>';
		                }
		            }
				]],
				onLoadSuccess: function(data){
					console.log(data);
				},
				onHeaderContextMenu: function(e, field){
		            e.preventDefault();
		            if (!cmenu2){
		                createColumnMenu2();
		            }
		            cmenu2.menu('show', {
		                left:e.pageX,
		                top:e.pageY
		            });
	        	}
	        });
		});
	});
	function showCaseManageDetail(id){
		var d = top.dialog({
            title : "案件详情",
            modal : true,
            url : '${ctx}/casemanage/showCaseManageDetail',
            height : 500,
            width : 1000,
            data : id
        });
        d.show();
        return false;
    };
    /** 编辑页面跳转 **/
    function showEditDialog(pId,index) {
    	var row = $('#caseObject').datagrid('getData').rows[index];
    	var caseUuid = $('#dg').datagrid('getSelected')["case_uuid"];
    	var title ='';
    	if(pId){
    		title = "编辑详情        (修改正确姓名和身份证可将卡号归属到对应主题下)";
    	}else{
    		row = {"casemanagerId": caseUuid};
    		title = "新增案件对象";
    	}
        var d = top.dialog({
            title : title,
            modal : true,
            url : '${ctx}/casemanage/showCaseManageObjectDetail',
            height : 480,
            width : 500,
            data : row,
            onclose : function() {
                window.location.reload();
            }
        });
        d.show();
        return false;
    }
    function delCaseObj(id) {
		var d = dialog({
            title: '提示',
            content: '您确定要删除么！',
            okValue: '确 定',
            ok: function() {
            	$.ajax({
                    url: '${ctx}/casemanage/deleteCaseObject?id='+id,
                    dataType: 'json',
                    success: function (obj) {
                        window.parent.location.reload();
                    }
                });
                return false;
            },
            cancelValue: '取消',
            cancel: function() {}
        });
        d.showModal();
    }
</script>
<style>
    a.casebi {
        color: #1890ff;
    }
    sapn.caseshu {
        color: #E2E2E2;
    }
    .form-group.filecon {
        margin-top: -9px;
        margin-bottom: 10px;
    }
    .datagrid-wrap.panel-body.panel-body-noheader {
        padding: 0;
    }
    input.form-control.filecaseinp {
        margin-left: -20px;
    }
    .table-responsive{
		border: 1px solid #D3D3D3;
    }
    .table-responsive.c{
		border: 1px solid #D3D3D3;
		margin: -20px;
    }
	.top-navigation .wrapper.wrapper-content{
		padding: 0;
	}
	.wrapper-content{
		padding: 0;
	}
	.wrapper{
		padding: 0;
	}
    .col-lg-12{
        background-color: #fff;
    }
    .gray-bg{
        background-color: #fff;
    }
    .panel-body {
        border: transparent!important;
    }
    ul.nav.nav-tabs li.active{
        border-bottom: transparent!important;
    }
    ul.nav.nav-tabs li a{
        line-height: 4px;
    }
    .top-navigation .nav > li > a {
        color: #A0A0A0;
        font-weight: normal;
    }
    .top-navigation .nav > li a:focus, .top-navigation .nav > li a:hover{
        color: #333;
    }
    .top-navigation .nav > li.active > a {
        color: #333;
    }
	.ibox.float-e-margins {
        margin: -5px -15px 0 -15px;
	}
	input.form-control{
		width: 266px!important;
		height: 30px;
		background-color: #ffffff;
		border-radius: 4px;
		border: solid 1px #efebeb;
	}
    .form-group {
        margin-bottom: 10px;
    }
    .float-e-margins .btn{
        margin-bottom: 0;
    }
    .btn-primary{
        border-color: transparent;
    }
	input.btn.btn-primary.querybtn{
		width: 60px;
		height: 30px;
        line-height: 17px;
		background-color: #4695ED;
		border-radius: 4px;
        margin-left: 7px;
	}
	input.btn.btn-primary.addbtn{
		width: 70px;
		height: 30px;
        line-height: 17px;
		background-color: #4695ED;
		border-radius: 4px;
        margin-left: 7px;
	}
    .addcon {
        position: absolute;
        top: 0px;
        right: 10px;
    }
    span.addfont {
        margin-right: 3px;
    }
    .btn.btn-primary.daobtn{
    	margin-right: -14px;
        width: 77px;
        height: 30px;
        line-height: 17px;
        background-color: #287cdf;
        border-radius: 4px;
    }
    .daocon {
        position: absolute;
        top: -10px;
        right: 10px;
    }
    sapn.spanred {
        color: #ff6869;
    }
    .top-navigation #page-wrapper {
	    margin-left: 10px;
	}
</style>
